import React, { Component } from 'react';

class App extends Component {

  state = {
    msg: '昨天',
    userName: '高了个举'
  }

  changeMsg(event){
    console.log('输入框有改变',this);
    this.setState({
      msg: event.target.value
    })
  }

  changeName(e){
    this.setState({
      userName: e.target.value
    })
  }

  render() {
    return (
      <div>
        <h1> {this.state.msg} --- {this.state.userName} </h1>
        {/* 该输入框不能输入任何内容，我们设置了 value 但是没有做其他处理 */}
        {/* <input type="text" value={this.state.msg} /> */}

        {/*
          如果输入框设置了 value 属性那么就一定要设置一个 onChange 事件，否则该输入无法
          输入任何内容，因为是只读的
        */}
        {/* 如果我们需要的是默认值，那么可以使用 defaultValue 进行设置默认值 */}
        {/* 这里的默认值，只能获取到当前值，后期输入框的改变不会影响到 msg */}
        <input type="text" defaultValue={this.state.msg} />

        <input type="text" value={this.state.msg} onChange={(e)=>{this.changeMsg(e)}} />

        <br />
        {/* 该写法叫受控组件，受控表单，有 value 就代表是受控的，没有 value 非受控 */}
        <input type="text" value={this.state.userName} onChange={(e)=>{this.changeName(e)}} />

      </div>
    );
  }
}

export default App;
